<template>
	<view class="userInfo">
		<view class="userInfo-form">
			<view class="userInfo-item">
				<view class="userInfo-label">
					头像:
				</view>
				<view class="userInfo-input">
					<input type="text" name="" id="" placeholder="请输入头像" style="font-size: 26rpx;">
				</view>
			</view>
			
			<view class="userInfo-item">
				<view class="userInfo-label">
					用户名:
				</view>
				<view class="userInfo-input">
					<input type="text" name="" id="" placeholder="请输入用户名" style="font-size: 26rpx;">
				</view>
			</view>
			
			<view class="userInfo-item">
				<view class="userInfo-label">
					昵称:
				</view>
				<view class="userInfo-input">
					<input type="text" name="" id="" placeholder="请输入昵称" style="font-size: 26rpx;">
				</view>
			</view>
			
			<view class="userInfo-item">
				<view class="userInfo-label">
					性别:
				</view>
				<view class="userInfo-input">
					<input type="text" name="" id="" placeholder="请输入性别" style="font-size: 26rpx;">
				</view>
			</view>
			
			<view class="userInfo-item">
				<view class="userInfo-label">
					生日:
				</view>
				<view class="userInfo-input">
					<input type="text" name="" id="" placeholder="请输入生日" style="font-size: 26rpx;">
				</view>
			</view>
		</view>
		
		<view class="footer-btn">
			<view class="btn">
				提交信息
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style scoped lang="scss">
	.userInfo{
		.userInfo-form{
			box-sizing: border-box;
			padding: 0px 30rpx;
			background-color: #fff;
			.userInfo-item{
				display: flex;
				height: 120rpx;
				align-items: center;
				.userInfo-label{
					width: 140rpx;
					font-size: 26rpx;
				}
				
				.userInfo-input{
					
				}
			}
		}
	}
	
	.footer-btn{
		box-sizing: border-box;
		padding: 30rpx;
		.btn{
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			color: #fff;
			background-color: red;
			border-radius: 160rpx;
		}
	}
</style>
